<!--
  Generated template for the ProductOrderPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<extendheader title="生产单">
  <button ion-button item-end icon-left class="left" (click)="back()">
    <ion-icon name="ios-arrow-back"></ion-icon>
    返回
  </button>
  <!-- <ion-icon name="ios-arrow-back" class="left" style="margin-left:10px;font-size:20px;color:#fff;"></ion-icon> -->
</extendheader>

<ion-content style="background-color: #f3f8ff;">
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉刷新..." refreshingSpinner="circles" refreshingText="正在加载中...">
    </ion-refresher-content>
  </ion-refresher>

  <div style="position:relative;" *ngIf="isTrue">
    <ion-item class="lineselect">
      <ion-label style="color:#000;font-size:20px;">{{default}}</ion-label>
      <ion-select [(ngModel)]="n" [selectOptions]="{title:'产线选择',cssClass:'choseline'}" okText="确定" (ngModelChange)="changeline()" interface="Popover" cancelText="取消">
        <ion-option *ngFor="let data of datalist;let i = index" [value]="i">{{data.productionLine}}</ion-option>
      </ion-select>
    </ion-item>
  </div>

  <div *ngIf="isTrue">
    <ion-list style="margin: 0px;" class="order">
      <div class="openContent">
        <div class="choose">
          <button id="whole" class="active" (click)="clickWhole($event)">全部({{(item.producingStateQuantity||item.waitingStateQuantity||item.endStateQuantity)?(item.producingStateQuantity+item.waitingStateQuantity+item.endStateQuantity) : 0}})</button>
          <button id="production" (click)="clickProduction($event)">生产中({{item.producingStateQuantity?item.producingStateQuantity:0}})</button>
          <button id="toBeProduced" (click)="clickToBeProduced($event)">待生产({{item.waitingStateQuantity?item.waitingStateQuantity:0}})</button>
          <button id="completion" (click)="clickCompletion($event)">当日完成({{item.endStateQuantity?item.endStateQuantity:0}})</button>
        </div>
        <ul *ngIf="isPro">
          <li *ngFor="let pro of item.producingState;let i = index">
            <div class="msgtitle">
              <button>生产中</button>
              <span>
                  {{pro.orderNumber}}
                </span>
              <p style="font-size:14px;margin-left:20%;">{{pro.productName}}</p>
            </div>
            <div class="msgcontent">
              <div>
                <span>
                    <p>计划生产数量</p>
                    <p>{{pro.planQuantity}}</p>
                  </span>
                <span>
                    <p>计划开始-结束时间</p>
                    <p>{{pro.planDatefrom}} -- {{pro.planDateto}}</p>
                  </span>
                <span>
                    <p>实际开始时间</p>
                    <p>{{pro.startDate}}</p>
                  </span>
                <span>
                    <time style="color:#ff8914;font-size:16px;">剩余(未完成)</time>
                    <time style="color:#ff8103;font-size:18px;font-weight:600;">{{pro.residueQuantity}}</time>
                  </span>
              </div>
            </div>
            <div class="describ" style="margin-top:10px;">
              <p style="margin:0;padding-left:5px;color:#898989;">
                描述：
              </p>
              <p style="margin:0;padding-left:10px;color:#898989;">
                {{pro.description}}
              </p>
            </div>
            <div style="background-color:#efefef;width:100%;height:14px;margin-top:10px;" class="Percentagebox">
              <div [ngStyle]="{'width':pro.percent}" class="Percentage">
              </div>
            </div>
          </li>
        </ul>
        <ul *ngIf="isW">
          <li *ngFor="let w of item.waitingState;let i = index">
            <div class="msgtitle">
              <button style="background-color:#d7d7d7;">待生产</button>
              <span>
                  {{w.orderNumber}}
                </span>
              <span style="padding:4px;background-color:orange;float:right;color:#fff;border-radius:3px;font-size:12px;" *ngIf="w.notIdentify">{{w.notIdentify}}</span>
              <p style="font-size:14px;margin-left:20%;">{{w.productName}}</p>
            </div>
            <div class="msgcontent">
              <div>
                <span>
                    <p>计划生产数量</p>
                    <p>{{w.planQuantity}}</p>
                  </span>
                <span>
                    <p>计划开始-结束时间</p>
                    <p>{{w.planDatefrom}} -- {{w.planDateto}}</p>
                  </span>
              </div>
            </div>
            <div class="describ" style="margin-top:10px;">
              <p style="margin:0;padding-left:5px;color:#898989;">
                描述：
              </p>
              <p style="margin:0;padding-left:10px;color:#898989;">
                {{w.description}}
              </p>
            </div>
            <div style="background-color: #efefef;width:100%;height:14px;margin-top:10px;">
            </div>
          </li>
        </ul>
        <ul *ngIf="isEnd">
          <li *ngFor="let end of item.endState;let i = index">
            <div class="msgtitle">
              <button style="background-color:#80d879;">已完成</button>
              <span>
                  {{end.orderNumber}}
                </span>
              <p style="font-size:14px;margin-left:20%;">{{end.productName}}</p>
            </div>
            <div class="msgcontent">
              <div>
                <span>
                    <p>计划生产数量</p>
                    <p style="color:#595757;">{{end.planQuantity}}</p>
                  </span>
                <span>
                    <p>计划开始-结束时间</p>
                    <p>{{end.planDatefrom}} -- {{end.planDateto}}</p>
                  </span>
                <span>
                    <p>实际开始时间</p>
                    <p>{{end.startDate}}</p>
                  </span>
                <span>
                    <p>实际结束时间</p>
                    <p>{{end.finishDate}}</p>
                  </span>
              </div>
            </div>
            <div style="background-color: #80d879;width:100%;height:14px;margin-top:10px;">
            </div>
          </li>
        </ul>
        <div *ngIf="((item.producingStateQuantity||item.waitingStateQuantity||item.endStateQuantity)?(item.producingStateQuantity+item.waitingStateQuantity+item.endStateQuantity)
        : 0) == 0 ?true:false;" style="width:100%;text-align:center;margin-top:30px;">
          <img src="./assets/imgs/errorinfo.png" alt="" style="margin:50px auto;width:50%;">
          <p style="color:#d4d7dd;font-size:20px;margin-top:-30px;">无任何信息</p>
        </div>
      </div>
    </ion-list>
  </div>
  <div *ngIf="!isTrue" style="width:100%;text-align:center;margin-top:30px;">
    <img [src]="imgsrc" alt="" style="margin:50px auto;width:50%;">
  </div>
  <div style="height:130px;width:100%;text-align:center;line-height:65px;font-size:20px;color:#d4d7dd;">
    {{info}}
  </div>
</ion-content>
